<template>
  <div class="studio">
    <!-- 头部 -->
    <div class="stu">
      <van-nav-bar title="杭州名医工作室">
        <template #left>
          <van-icon
            name="arrow-left"
            :size="20"
            color="#000000"
            @click="hanclick"
          />
        </template>
      </van-nav-bar>
    </div>
    <van-pull-refresh v-model="state.loading" @refresh="onRefresh">
      <!-- 轮播图 -->
      <div class="lunbo">
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
          :height="358"
        >
          <van-swipe-item v-for="item in banpic" :key="item">
            <img :src="item.url" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 科室 -->
      <div class="keshi">
        <router-link v-for="(item, index) in keshi" :key="item" :to="item.url">
          <div class="lei" @click="studioclick(item.title, index)">
            {{ item.title }}
          </div>
        </router-link>
      </div>
      <router-view></router-view>
    </van-pull-refresh>
  </div>
</template>
<script>
import { ref, onMounted, computed, provide, reactive } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { Toast } from "vant";
export default {
  setup() {
    const state = reactive({
      loading: false,
    });
    const router = useRouter();
    const store = useStore();
    // const num = ref(0);
    const onRefresh = () => {
      setTimeout(() => {
        Toast("刷新成功");
        state.loading = false;
      }, 500);
    };

    const banpic = ref([
      {
        url: require("../assets/img/img1.1.png"),
      },
      {
        url: require("../assets/img/img2.1.png"),
      },
      {
        url: require("../assets/img/img3.1.png"),
      },
      {
        url: require("../assets/img/img4.1.png"),
      },
    ]);

    const keshi = ref([
      {
        title: "妇产科",
        url: "/studio/fuchan",
      },
      {
        title: "儿科",
        url: "/studio/erke",
      },
      {
        title: "内科",
        url: "/studio/neike",
      },
      {
        title: "外科",
        url: "/studio/waike",
      },
      {
        title: "耳鼻喉科",
        url: "/studio/erpihou",
      },
      {
        title: "眼科",
        url: "/studio/yanke",
      },
      {
        title: "皮肤科",
        url: "/studio/pifike",
      },
      {
        title: "中医科",
        url: "/studio/zhongyi",
      },
      {
        title: "心理科",
        url: "/studio/xinli",
      },
      {
        title: "肿瘤科",
        url: "/studio/zhongliu",
      },
      {
        title: "生殖中心",
        url: "/studio/shengchi",
      },
      {
        title: "口腔科",
        url: "/studio/kouqing",
      },
      {
        title: "超声科",
        url: "/studio/chaoshen",
      },
      {
        title: "更多",
        url: "/studio/gengduo",
      },
    ]);

    const hanclick = () => {
      router.go(-1);
    };

    const studioclick = (a) => {
      // num.value = index;
      setRecommend(a);
    };
    //计算属性拿取vuex里面的数据
    const studio = computed(() => store.state.recommend);

    onMounted(() => {
      setRecommend("妇产科");
    });

    const setRecommend = (a) => store.dispatch("getRecommend", a);

    provide("studio", studio);

    return {
      banpic,
      state,
      keshi,
      hanclick,
      onRefresh,
      router,
      // num,
      studio,
      studioclick,
      setRecommend,
    };
  },
};
</script>
<style lang="less" scoped>
.studio {
  .active {
    background: #1890ff;
    border-radius: 16px;
    color: #ffffff;
  }
  position: relative;
  background: white;
  .stu {
    background: white;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .lunbo {
    width: 100%;
    margin-top: 46px;
    img {
      width: 100%;
    }
  }
  .van-nav-bar__title {
    width: 128px;
    height: 17px;
    font-size: 18px;
    font-weight: 445;
    color: #333333;
    line-height: 18px;
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .keshi {
    margin: 40px 0 20px;
    width: 100%;
    height: 155px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    .lei {
      opacity: 0.8;
      margin-right: 8px;
      width: 85px;
      height: 32px;
      border: 2px solid #686868;
      border-radius: 16px;
      font-size: 13px;
      font-weight: bold;
      line-height: 28px;
      text-align: center;
      color: #666666;
    }
    .router-link-active {
      .lei {
        background: #1890ff;
        color: #ffffff;
        border: none;
      }
    }
  }
}
</style>
